.#{$f-multiselect-prefix} {
  background: $f-multiselect-bg;
  flex-wrap: nowrap;
  margin: 0;
  padding-left: 1.25rem;

  .#{$f-multiselect-prefix}-list {
    border: $f-multiselect-border;
    border-radius: $f-multiselect-radius;
    background-color: $f-multiselect-bg;
    padding: 0;

    &-content {
      height: $f-multiselect-height;

      .columns-box {
        padding: 0;
      }
    }

    .#{$f-multiselect-prefix}-list-title {
      background: $f-multiselect-title-bg;
      border-radius: $f-multiselect-radius $f-multiselect-radius 0 0;
      font-size: 0.875rem;
      padding: 0 $f-multi-seclect-common-gutter-x;
      color: $f-multiselect-title-color;
      margin: 0;
      height: $f-multi-select-title-height;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .search {
      margin: $f-multi-select-search-inner-gutter;
      padding: 0;

      .f-icon-search {
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        margin-top: 0;
        font-size: $farris-font-size-base;
        color: $f-text-07;
        width: $f-multiselect-search-icon-size;
        text-align: center;
        height: $f-multiselect-search-icon-size;
        top: 50%;
        margin-top: - $f-multiselect-search-icon-size * 0.5;
        line-height: $f-multiselect-search-icon-size;

        &:hover {
          color: $f-theme-05;
        }

        &:active {
          color: $f-theme-01 ;
        }
      }
    }

    .#{$f-multiselect-prefix}-list-group {
      padding: $f-multi-select-listgroup-inner-gutter;

      &-item {
        padding: $f-multi-select-listgroup-item-gutter-y $f-multi-seclect-common-gutter-x;
        line-height: 1.25rem;
        cursor: default;
        margin: $f-multi-select-listgroup-item-outer-gutter;
        border-radius: $f-multi-select-listgroup-item-border-radius;

        .custom-control-label {
          color: $f-multiselect-list-item-color;
          padding-left: $f-multiselect-checkbox-size + $f-multiselect-checkbox-gutter;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          &::before {
            top: 50%;
            left: 1px;
            margin-top: (- 0.5*$f-multiselect-checkbox-size) + 0.0625;
            font-size: $f-multiselect-checkbox-size - 0.0625;
            width: $f-multiselect-checkbox-size;
            height: $f-multiselect-checkbox-size;
          }
        }

        .custom-control-input:disabled+.custom-control-label {
          color: $f-multiselect-list-item-disable-color;
        }

        &.active {
          background: $f-multiselect-list-item-active-bg;
        }

        &:not(.f-state-disabled):hover {
          background: $f-multiselect-list-item-hover-bg;
        }

        &.f-state-disabled {
          background: #fff !important;
        }


        .custom-checkbox {
          padding: 0;
          margin: 0;
          width: 100%;
          overflow: hidden;
        }
      }

      //右侧
      &-item {
        &.item--show-checkbox {
          position: relative;
          padding: 0.375rem $f-multi-seclect-common-gutter-x 0.375rem ($f-multi-seclect-common-gutter-x+$f-multiselect-checkbox-size+ $f-multiselect-checkbox-gutter);

          .custom-checkbox {
            position: absolute;
            left: $f-multi-seclect-common-gutter-x;
            top: 50%;
            margin-top: - 0.5*$f-multiselect-checkbox-size;
            width: $f-multiselect-checkbox-size;
            height: $f-multiselect-checkbox-size;
            min-height: $f-multiselect-checkbox-size;
          }
        }
      }
    }

  }

  .#{$f-multiselect-prefix}-list-btns {
    flex-shrink: 0;
    padding: 0 1.25rem;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    .f-btn-icon {
      width: 3.125rem;
      margin-bottom: 0.625rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: $farris-btn-secondary-color;

      .f-icon {
        font-size: $farris-font-size-base;
      }

      &:last-child {
        margin-bottom: 0;
      }

      &.right-all {
        margin-bottom: 2.5rem;
      }
    }
  }

  // 树表样式
  .farris-treetable {
    padding: $f-multi-select-listgroup-inner-gutter;

    .table td {
      padding-left: $f-multi-seclect-common-gutter-x;
      padding-right: $f-multi-seclect-common-gutter-x;
    }
  }
}